<template>
    <div>
		<el-card class="!border-none pt-4" shadow="never">
			<el-form class="ls-form el-set-form" :model="formData" inline>
				<el-form-item label="产品名称">
					<el-input class="w-[240px]" placeholder="请输入" v-model="formData.admin_name" clearable
						@keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item>
					<el-button class="main-color1 w-[76px] h-[36px]" @click="resetParams">重置</el-button>
					<el-button class="w-[76px] bg-[#0054A6] h-[36px]" type="primary" @click="resetPage">查询</el-button>
				</el-form-item>
			</el-form>
		</el-card>
        <el-card class="!border-none" shadow="never">
            <el-table class="mt-[20px]" size="large" :data="pager.lists" v-loading="pager.loading"
			:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
			:cell-style="{'color':'#0054A6','padding':'20px 0'}"
			>
                <el-table-column label="工序编号" prop="scene_name" align="center" >
					<template #default="{ row }">
					    <el-button type="primary" link>
					        <router-link
					            :to="{
					                path: getRoutePath('message.message/detail'),
					                query: {
					                    id: row.id
					                }
					            }"
					        >
					            <span class="main-color">{{row.scene_name}}</span>
					        </router-link>
					    </el-button>
					</template>
				</el-table-column>
                <el-table-column label="订单编号" prop="type_desc" align="center" />
				<el-table-column label="产品名称" prop="type_desc" align="center" />
               <el-table-column label="类型" prop="scene_name" align="center" >
               	<template #default="{ row }">
               	    <span class="main-color">{{row.scene_name}}</span>
               	</template>
               </el-table-column>
			    <el-table-column label="节点名称" prop="type_desc" align="center" />
				<el-table-column label="创建时间" prop="type_desc" align="center" />
                <el-table-column label="操作" fixed="right" align="center" >
                    <template #default="{ row }">
                        <el-button 
						type="primary" 
						link
						@click="detailFunc(row.id)"
						>
                            <span class="main-color1">详情</span>
						</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
		
		<!-- 详情弹框 -->
		<el-dialog v-model="centerDialogVisible" title="详情" width="30%" center>
		    <div class="main-color pb-[40px] pt-[10px]">
				<div>
					类型：工序上传
				</div>
				<div class="mt-[10px] mb-[10px]">
					所处节点：第一节点
				</div>
				<div class="flex">
					照片素材：
					<div>
						<el-image class="rounded w-[80px] h-[80px] ml-[10px]"
						v-for="i in 2"
						src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
					</div>
				</div>
			</div>
		</el-dialog>
    </div>
</template>
<script lang="ts" setup name="notice">
import { noticeLists } from '@/api/message'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
const centerDialogVisible = ref(false)
const formData = reactive({
	admin_name: '',
	url: '',
	ip: '',
	type: '',
	start_time: '',
	end_time: ''
})
	
enum NoticeEnums {
    All = 1,
    PLATFORM = 2,
	HasRead = 3
}

const tabsActive = ref(NoticeEnums.All)
//查看详情
const detailFunc = async(row) => {
	console.log(row,'row')
	centerDialogVisible.value = true
}
// 列表数据
const params = reactive({
    recipient: tabsActive
})
const { pager, getLists } = usePaging({
    fetchFun: noticeLists,
    params
})
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    // await menuDelete({ id })
    getLists()
}
onActivated(() => {
    getLists()
})

getLists()
</script>
<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	.el-tabs__item.is-active{
		color: var(--el-text-color-main);
		font-weight: bold;
	}
	.el-tabs__nav-wrap::after{
		background-color: #F5F5F5;
	}
	.el-tabs__active-bar{
		background-color: var(--el-text-color-main);
	}
</style>
